import {Button, Checkbox, Flex, Form, Input} from "antd";
import {LockOutlined, UserOutlined} from '@ant-design/icons';
import {Link} from "react-router-dom";
import {message} from "antd/lib";
import {useNavigate} from "react-router";

import './index.less'
import {loginAsync} from "@pages/Login/slice";
import {useAppDispatch} from "@/app/hooks";

interface ILogin {
    account: string
    password: string
    remember: boolean
}

// 设置默认值
const defaultValues: ILogin = {
    account: 'tw9izl.gms@139.com',
    password: '123456',
    remember: true
}

function Login() {
    const navigate = useNavigate()
    const dispatch = useAppDispatch();
    const onFinish = async (values: ILogin) => {
        // 发送请求，请求登录
        // 到底什么样的数据会交给redux管理？至少有两个组件使用这个数据
        // 将来用户相关的数据会有多个组件使用，交给redux管理
        const result = await dispatch(loginAsync(values))
        if (result.type === 'user/loginAsync/fulfilled') {
            message.success('登录成功')
            navigate('/mkbk/home')
        }
        
        /* const res = await userLoginAPI(values)
         if (res.status === 200 && res.data.code !== 3000) {
         message.error(res.data.message)
         }
         if (values.remember) localStorage.setItem('token', res.data.data.token)
         else localStorage.removeItem('token')
         message.success("登录成功")
         navigate('/mkbk/home')*/
    }
    return (
        <div className="login">
            <div className="login-container">
                <h1>后台管理平台</h1>
                <Form
                    name="login"
                    initialValues={defaultValues}
                    style={{maxWidth: 360}}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="account"
                        rules={[{required: true, message: '请输入账号!'}]}
                    >
                        <Input prefix={<UserOutlined/>} placeholder="账号"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{required: true, message: '请输入密码!'},
                            {required: true, message: '密码至少6位!', min: 6}]}
                    >
                        <Input prefix={<LockOutlined/>} type="password" placeholder="密码"/>
                    </Form.Item>
                    <Form.Item>
                        <Flex justify="space-between" align="center">
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住我</Checkbox>
                            </Form.Item>
                            <Link to="/home">忘记密码</Link>
                        </Flex>
                    </Form.Item>
                    <Form.Item>
                        <Button block type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Login;
